<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> New Document </title>
  	<style>
    /* type | image | position */
    .normal ul{
      list-style: lower-roman url("https://mdn.mozillademos.org/files/11981/starsolid.gif") inside;
    }
    /* type | image | position */
    
    .special ul{
      list-style: lower-roman url("https://mdn.mozillademos.org/files/11981/starsolid.gif") outside;
    }
    
	</style>
 </head>
 <body>
    <div class="normal">
        List 1
        <ul class="one">
          <li>List Item1</li>
          <li>List Item2</li>
          <li>List Item3</li>
        </ul>
        List 2
        <ul class="two">
          <li>List Item A</li>
          <li>List Item B</li>
          <li>List Item C</li>
        </ul>
    </div>
    <div class="special">
        List 1
        <ul class="one">
          <li>List Item1</li>
          <li>List Item2</li>
          <li>List Item3</li>
        </ul>
        List 2
        <ul class="two">
          <li>List Item A</li>
          <li>List Item B</li>
          <li>List Item C</li>
        </ul>
    </div>
 </body>
</html>